<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <!-- 跳转路由并携带 params 参数，to的字符串写法 注意路由js里还要写接收这些参数的占位符 -->
                <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}/${m.content}`">{{ m.title }}</router-link> -->

                <!-- 跳转路由并携带 params 参数，to的对象写法 -->
                <router-link :to="{
                    // path:'/home/message/detail', // 注意！！！！！！！params只能搭配name，不能搭配path
                    name: 'xiangqing',
                    query: { // 用query形式记得把params改为query
                        id: m.id,
                        title: m.title,
                        content: m.content,
                    }
                }">
                    {{ m.title }}
                </router-link>
                <button @click="pushShow(m)">push查看</button>
                <button @click="replaceShow(m)">replace查看</button>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
    name: 'Message',
    data() {
        return {
            messageList: [
                { id: '001', title: '消息001', content: '你是一块巧克力，乖巧可爱又美丽。' },
                { id: '002', title: '消息002', content: '美人杀人不用刀,勾魂夺魄全在腰。' },
                { id: '003', title: '消息003', content: '你好美，太平洋是我为你流的口水。' },
            ],
        }
    },
    methods: {
        pushShow(m) {
            this.$router.push({
                name: 'xiangqing',
                query: {
                    id: m.id,
                    title: m.title,
                    content: m.content,
                }
            })
        },
        replaceShow(m) {
            this.$router.replace({
                name: 'xiangqing',
                query: {
                    id: m.id,
                    title: m.title,
                    content: m.content,
                }
            })
        },
    },
    beforeDestroy() {
        console.log("Message组件即将被销毁");
    },
}) 
</script>